<template>
    <div>
        <h1>App</h1>

        <!-- {{ shopStore.title }} -->
        {{ shopStore.count }}
        <!-- <button @click="shopStore.say()">say</button> -->
        <hr>
        {{ cartStore.count }}

        <!-- 
        <input type="text" v-model="title"> {{ cartStore.title }}
        <hr>
        {{ cartStore.count }}
        <button @click="cartStore.count++">cartStore.count++</button>
        <button @click="cartStore.say()">say</button> -->
        <RouterView></RouterView>
    </div>
</template>
<script setup>
import { storeToRefs } from 'pinia';
import { useShopStore, useCartStore } from './stroe/shop.js';

const shopStore = useShopStore();
const cartStore = useCartStore();

/*
reactive 解构会丢失响应式
1. 可以使用toRefs方法将每一个属性转换成ref
2. pinia中可以使用 storeToRefs 转换 stroe
*/
const { title } = storeToRefs(cartStore); // reactive 

</script>
<style>
div {
    border: solid;
    padding: 10px;
}
</style>